<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-form
        label-position="right"
        label-width="120px"
        :model="formLabelAlign"
      >
        <el-form-item
          label="学院名称："
          v-if="this.title === '新增学院' || this.title === '编辑学院'"
        >
          <el-input v-model="formLabelAlign.collegeName"></el-input>
        </el-form-item>
        <el-form-item
          label="所属学院："
          v-if="this.title === '新增班级' || this.title === '编辑班级'"
        >
          <el-select v-model="formLabelAlign.region" placeholder="请选择学院">
            <el-option
              :label="item.className"
              :value="item.id"
              v-for="(item, index) in collegeList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="班级名称："
          v-if="this.title === '新增班级' || this.title === '编辑班级'"
        >
          <el-input v-model="formLabelAlign.className"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
export default {
  components: {},
  props: {
    title: {
      default: () => "新增学院",
    },
    formLabelAlign: {
      default: () => {
        return {
          collegeName: "",
          region: "",
          className: "",
          id: "",
        };
      },
    },
  },
  data() {
    return {
      dialogVisible: false,
      // formLabelAlign: {

      // },
      collegeList: [],
    };
  },
  computed: {
    ...mapState({}),
  },
  watch: {},
  beforeDestroy() {},
  created() {
    this.selectCollege();
  },
  methods: {
    // 查询学部
    selectCollege() {
      axios.post("/api/user/select_college", {}).then((res) => {
        this.collegeList = res.data;
      });
    },
    handleClose() {
      this.dialogVisible = false;

      if (this.title === "新增学院" || this.title === "新增班级") {
        this.$message({
          type: "warning",
          message: "已取消新增",
        });
      } else {
        this.$message({
          type: "warning",
          message: "已取消编辑",
        });
      }
    },
    openDialog() {
      this.dialogVisible = true;
    },
    submit() {
      console.log(this.formLabelAlign, typeof this.formLabelAlign.region);
      // let className = this.formLabelAlign.className
      let collegeName = this.formLabelAlign.collegeName;
      let className = this.formLabelAlign.className;
      let fatherId = this.formLabelAlign.region;
      let id = 0;
      let clickId = this.formLabelAlign.id;
      if (this.title === "新增学院") {
        axios
          .post("/api/user/addCollege", {
            collegeName,
            id,
          })
          .then((res) => {
            console.log(res);
            this.dialogVisible = false;
            if (res.data.msg === "添加成功") {
              this.$message({
                type: "success",
                message: `${res.data.msg}`,
              });
            } else {
              this.$message({
                type: "warning",
                message: `${res.data.msg}`,
              });
            }
            this.$emit("changedata", "");
            this.selectCollege();
          });
      } else if (this.title === "编辑学院") {
        axios
          .post("/api/user/update_college", {
            collegeName,
            clickId,
          })
          .then((res) => {
            console.log(res);
            this.dialogVisible = false;
            if (res.data.msg === "编辑成功") {
              this.$message({
                type: "success",
                message: `${res.data.msg}`,
              });
            } else {
              this.$message({
                type: "warning",
                message: `${res.data.msg}`,
              });
            }
            this.$emit("changedata", "");
          });
      } else if (this.title === "新增班级") {
        axios
          .post("/api/user/addClass", {
            className,
            fatherId,
          })
          .then((res) => {
            console.log(res);
            this.dialogVisible = false;
            if (res.data.msg === "添加成功") {
              this.$message({
                type: "success",
                message: `${res.data.msg}`,
              });
            } else {
              this.$message({
                type: "warning",
                message: `${res.data.msg}`,
              });
            }
            this.$emit("changedata", "");
          });
      } else if (this.title === "编辑班级") {
        axios
          .post("/api/user/update_class", {
            className,
            fatherId,
            clickId,
          })
          .then((res) => {
            console.log(res);
            this.dialogVisible = false;
            if (res.data.msg === "编辑成功") {
              this.$message({
                type: "success",
                message: `${res.data.msg}`,
              });
            } else {
              this.$message({
                type: "warning",
                message: `${res.data.msg}`,
              });
            }
            this.$emit("changedata", "");
          });
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-button {
  position: static !important;
}
/deep/ .el-dialog {
  .el-dialog__header {
    background: #143853 !important;
  }
  .el-dialog__title {
    color: #ffffff;
  }
  .el-dialog__body {
    color: #ffffff;
    padding-bottom: 20px;
    background: #0f2d43 !important;
  }
  .el-dialog__footer {
    padding-right: 40px;
    background: #0f2d43;
  }
  .el-form-item__label {
    color: #ffffff;
  }
  .el-input__inner {
    width: 100%;
    background: #0355a4 !important;
    border: none;
    color: #ffffff;
  }
  .el-select {
    width: 100%;
  }
}
</style>